<template>
<div class="index_provide_buy">
  <keep-alive>
  <van-tabs v-model:active="active">
    <!-- 最新供应信息 -->
    <van-tab :title="provideTitle" name="sellTag"> <!--providelist -->
        <div class="index_provideinof" v-for="(item,index) in providelist" :key="item._id" @click="gotoDetail(item.id)">
          <template v-if="proAllNum>index">
            <div class="myprovideinof">
              <img :src="item.imgUrl[0]" alt="">
              <h3>{{item.title}}</h3>
              <p>{{item.production}}</p>
              <p><i v-for="(it,index) in item.requirement" :key="index">{{obj[it]}}</i></p>
              <p><i>{{item.unitPrice}}</i>元/斤</p>
            </div>
          </template>
        </div>
        <div class="getMoreList" style="font-size:14px">
          <i @click="getMorePro" v-if="providelist.length>proAllNum">点击加载更多</i>
          <i v-else>到底啦~</i>
        </div>
    </van-tab>
    <!-- 最新采购信息 -->
    <van-tab :title="buyTitle" name="buyTag"  class="index_buy">
      <template v-for="(item,index) in buylist">
        <div class="index_buyinof"  :key=item._id v-if="buyAllNum>index">
            <p><i>采购</i>{{item.title}}</p>
            <p>期望产地:{{item.production}}</p>
            <p>品质要求:<i v-for="(it,index) in item.requirement" :key="index">{{quality[it]}}</i></p>
            <p>{{item.production}}<i v-for="(it,index) in item.requirement" :key="index">{{obj[it]}}</i></p>
            <p>2000斤</p>
        </div>
    </template>
      <div class="getMoreList" style="font-size:14px">
          <i @click="getMoreBuy" v-if="buylist.length>buyAllNum">点击加载更多</i>
          <i v-else>到底啦~</i>
        </div>
    </van-tab>
  </van-tabs>
  </keep-alive>
</div>

</template>

<script>
import { ref,computed,onMounted } from 'vue';
import {getIndexList} from "../../utils/api.js";
import { useRouter } from 'vue-router';
export default {
    setup(){
      const provideTitle=ref("最新供应信息");
      const buyTitle=ref("最新采购信息");
      const router = useRouter();
      //商品信息
      const obj = ref({
        1: '企业认证',
        2: '实名认证'
      })
      const quality=ref({
        1: "纯天然", 
        2: "无添加", 
        3: "保质保量"
      })
      //切换tab 默认为第一个
      const active = ref(0);
      //全部的供应列表数据
      const providelist=ref({});
      //全部的采购列表数据
      const buylist=ref({});
      //数量
      const proAllNum=ref(2);
      const buyAllNum=ref(2);
      //获取采购和供应数据
      const getList=async ()=>{
        let name="sellTag";
        const tempsell=await getIndexList({status:name});
        console.log(tempsell.result);
        providelist.value=tempsell.result;
        name="buyTag";
        const tempbuy=await getIndexList({status:name});
        buylist.value=tempbuy.result;
      }
      onMounted(()=>{
        getList();
      });
      //点击加载
      const getMorePro=()=>{
        proAllNum.value+=2;
      }
      const getMoreBuy=()=>{
        buyAllNum.value+=2;
      }
      //跳转详情
      const gotoDetail=(id)=>{
        router.push("/detail/"+id);
      }
      return { provideTitle,buyTitle,active,getList,providelist,buylist,obj,quality,proAllNum,getMorePro,buyAllNum,getMoreBuy,gotoDetail};
  },
  components:{

  },
  props:[]
};
</script>

<style lang="scss">
  .index_provide_buy{
    .getMoreList{
      width:100%;
      height:100px;
      line-height:100px;
      text-align: center;
    }
    .index_provideinof{
        display: block;
        float: left;
        width:47%;
        overflow:hidden;
        padding:0;
        margin-right:20px;
        .myprovideinof{
          display:flex;
          height:290px;
          margin-top:10px;
          
          border-radius: 12px;
          flex-direction: column;
          justify-content: space-between;
          font-size: 15px;
          height:290px;
          color:black;
          background:rgb(245, 244, 244);
          img{
            width:100%;
            height:165px;
          }
          h3{
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width:95%;
            margin-top: 4px;
           
          }
          p{
            margin: 5px 0;
          }
          p:nth-of-type(1){
            font-size: 12px;
          }
          p:nth-of-type(2){
            font-size: 12px;
            i{
              border:1px solid rgb(91, 219, 91);
              border-radius: 3px;
              color:rgb(91, 219, 91);
              margin-right:5px;
              padding:0 5px;
            }
          }
          p:nth-of-type(3){
            font-size: 16px;
            color:red;
            i{
              font-weight: bold;
            }
          }
        }
        &:nth-of-type(2n){
          margin-right:0px;
        }
        .van-tab__pane{
          display:flex;
          flex-wrap: wrap;
          justify-content:space-around;
        }
        .van-card__header{
          display: block!important;
          .van-card__content{
            text-align:left
            .van-card__title{
              font-size: 20px!important;
              font-weight:600!important;
            }
          }
          .van-card__thumb{
            display:block;
            width:100%;
            height:150px;
            margin:0;
          }
          .van-image__img{
            width:100%;
            height:150px;
          }
        }
  }
  .index_buy{
    .index_buyinof{
        width:100%;
        border-radius: 10px;
        font-size: 16px;
        color:black;
        height:160px;
        background:rgb(245, 244, 244);
        margin-bottom: 15px;
        padding:10px 0 10px 5px;
        box-sizing: border-box;
        p{
          margin:8px 0;
        }
        p:nth-of-type(1){
          font-size: 18px;
          font-weight:600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          i{ 
            background:rgb(67, 133, 67);
            color:white;
            border-radius: 3px;
            padding:2px 4px;
            font-size: 14px;
            vertical-align: middle;
            display: inline-block;
          }
        }
        p:nth-of-type(4){
          font-size: 12px;
            i{
              border:1px solid rgb(91, 219, 91);
              border-radius: 3px;
              color:rgb(91, 219, 91);
              margin-right:5px;
              padding:0 5px;
            }
          }
        p:nth-of-type(5){
          font-weight: 600;
          color:red;
          height:60px;
          font-size: 19px;
        }
      }   
    }
    
  } 
</style>
